---
title: NUQS
description: A powerful library for managing URL search parameters in your application. It provides a simple and efficient way to handle state management through URL search parameters.
---

### Installation

To install NUQS, simply run the following command:

```sh title="Terminal"
pnpm add nuqs
```

### Usage

Here is an example of how to use NUQS for URL search parameter state management:

```tsx title="my-component.tsx"
import { useSearchParams } from 'nuqs';

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  const handleInputChange = (event) => {
    setSearchParams({ query: event.target.value });
  };

  return (
    <div>
      <input
        type="text"
        value={searchParams.query || ''}
        onChange={handleInputChange}
      />
      <p>Search Query: {searchParams.query}</p>
    </div>
  );
}
```

In this example, the `useSearchParams` hook from NUQS is used to manage the state of the search query through URL search parameters. The `setSearchParams` function updates the URL search parameters whenever the input value changes.

### Benefits

- **Simplified State Management**: NUQS simplifies state management by using URL search parameters, making it easy to share and persist state across different parts of your application.
- **SEO-Friendly**: By using URL search parameters, NUQS helps improve the SEO of your application by making the state accessible through the URL.
- **Easy Integration**: NUQS is easy to integrate into your existing React application, providing a seamless experience for managing URL search parameters.

For more information and detailed documentation, visit the [NUQS website](https://nuqs.47ng.com/).
